
#loading {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 9999;
	top: 0;
	left: 0;
	display: none;
	&-container {
		background: #000;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.container {
			width: pr(1000);
			height: pr(1000);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
		
		.common {
			height: 25vw;
			max-height: 100%;
			overflow: auto;
			width: 10vw;
			margin: auto;
			max-width: 100%;
			position: absolute;
			border-radius: 0vw 25vw 0vw 25vw;
			box-shadow: inset 0vw 0vw 0vw .5vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;
		}
		
		.one {
			transform: rotate(45deg);
			left: 0;
			right: 0;
			top: 0;
			bottom: 25vw;
		}
		
		.two {
			transform: rotate(90deg);
			left: 15vw;
			right: 0;
			top: 0;
			bottom: 15vw;
		}
		
		.three {
			transform: rotate(135deg);
			left: 25vw;
			right: 0;
			top: 0;
			bottom: 0;
		}
		
		.four {
			transform: rotate(180deg);
			left: 15vw;
			right: 0;
			top: 15vw;
			bottom: 0;
		}
		
		.five {
			transform: rotate(225deg);
			left: 0;
			right: 0;
			top: 25vw;
			bottom: 0;
		}
		
		.six {
			transform: rotate(270deg);
			left: 0;
			right: 15vw;
			top: 15vw;
			bottom: 0;
		}
		
		.seven {
			transform: rotate(315deg);
			left: 0;
			right: 25vw;
			top: 0;
			bottom: 0;
		}
		
		.eight {
			transform: rotate(360deg);
			left: 0;
			right: 15vw;
			top: 0;
			bottom: 15vw;
		}
		
		.one {
			animation: one 1s ease infinite;
			-moz-animation: one 1s ease infinite;
			/* Firefox */
			-webkit-animation: one 1s ease infinite;
			/* Safari and Chrome */
			-o-animation: one 1s ease infinite;
			/* Opera */
		}
		
		@keyframes one {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.two {
			animation: two 1s .125s ease infinite;
			-moz-animation: two 1s .125s ease infinite;
			/* Firefox */
			-webkit-animation: two 1s .125s ease infinite;
			/* Safari and Chrome */
			-o-animation: two 1s .125s ease infinite;
			/* Opera */
		}
		
		@keyframes two {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.three {
			animation: three 1s .25s ease infinite;
			-moz-animation: three 1s .25s ease infinite;
			/* Firefox */
			-webkit-animation: three 1s .25s ease infinite;
			/* Safari and Chrome */
			-o-animation: three 1s .25s ease infinite;
			/* Opera */
		}
		
		@keyframes three {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.four {
			animation: four 1s .375s ease infinite;
			-moz-animation: four 1s .375s ease infinite;
			/* Firefox */
			-webkit-animation: four 1s .375s ease infinite;
			/* Safari and Chrome */
			-o-animation: four 1s .375s ease infinite;
			/* Opera */
		}
		
		@keyframes four {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.five {
			animation: five 1s .5s ease infinite;
			-moz-animation: five 1s .5s ease infinite;
			/* Firefox */
			-webkit-animation: five 1s .5s ease infinite;
			/* Safari and Chrome */
			-o-animation: five 1s .5s ease infinite;
			/* Opera */
		}
		
		@keyframes five {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.six {
			animation: six 1s .625s ease infinite;
			-moz-animation: six 1s .625s ease infinite;
			/* Firefox */
			-webkit-animation: six 1s .625s ease infinite;
			/* Safari and Chrome */
			-o-animation: six 1s .625s ease infinite;
			/* Opera */
		}
		
		@keyframes six {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.seven {
			animation: seven 1s .750s ease infinite;
			-moz-animation: seven 1s .750s ease infinite;
			/* Firefox */
			-webkit-animation: seven 1s .750s ease infinite;
			/* Safari and Chrome */
			-o-animation: seven 1s .750s ease infinite;
			/* Opera */
		}
		
		@keyframes seven {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.eight {
			animation: eight 1s .875s ease infinite;
			-moz-animation: eight 1s .875s ease infinite;
			/* Firefox */
			-webkit-animation: eight 1s .875s ease infinite;
			/* Safari and Chrome */
			-o-animation: eight 1s .875s ease infinite;
			/* Opera */
		}
		
		@keyframes eight {
			0%,
			100% {}
			50% {
				box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
			}
		}
		
		.container {
			animation: container 5s linear infinite;
			-moz-animation: container 5s linear infinite;
			/* Firefox */
			-webkit-animation: container 5s linear infinite;
			/* Safari and Chrome */
			-o-animation: container 5s linear infinite;
			/* Opera */
		}
		
		@keyframes container {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(-360deg);
			}
		}
		
		.progress {
			animation: progress 15s ease;
			-moz-animation: progress 15s ease;
			/* Firefox */
			-webkit-animation: progress 15s ease;
			/* Safari and Chrome */
			-o-animation: progress 15s ease;
			/* Opera */
		}
		
		@keyframes progress {
			0% {
				left: -24vw;
			}
			10% {
				left: -20vw;
			}
			30% {
				left: -16vw;
			}
			50% {
				left: -12vw;
			}
			65% {
				left: -10vw;
			}
			80% {
				left: -4vw;
			}
			100% {
				left: 0;
			}
		}
		
		.fade-in {
			animation: fade-in 2s ease;
			-moz-animation: fade-in 2s ease;
			/* Firefox */
			-webkit-animation: fade-in 2s ease;
			/* Safari and Chrome */
			-o-animation: fade-in 2s ease;
			/* Opera */
		}
		
		@keyframes fade-in {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		
		.out {
			animation: out 2s 15s ease;
			-moz-animation: out 2s 15s ease;
			/* Firefox */
			-webkit-animation: out 2s 15s ease;
			/* Safari and Chrome */
			-o-animation: out 2s 15s ease;
			/* Opera */
		}
		
		@keyframes out {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
	}
}
